<template>
    <div class="good-list">
        <div class="good-list-item" v-for="(item,index) in goodsList" :key="index" @click="toGoodInfo(item.id)">
            <img :src="item.img_url" alt="">
            <h3 class="title">{{item.title}}</h3>
           <div class="goodsinfo">
            <div class="price">
                <span class="new"> ￥{{item.sell_price}}</span>
                <span class="old"> ￥{{item.market_price}}</span>
            </div>
            <div class="stock">库存数:{{item.stock_quantity}}</div>
           </div>
        </div>

    <mt-button type="danger" size="large" @click="getMore">查看更多</mt-button>
    </div>
</template>
<script>
export default {
    data(){
        return {
            pageindex:1,
            goodsList:[]
        }
    },
    created(){
        this.getGoodsList();
    },
    methods:{
        // 请求产品列表
        getGoodsList(){
            this.$http.get('api/getgoods?'+this.pageindex).then(response =>{
                if(response.body.status ===0){
                    this.goodsList =this.goodsList.concat(response.body.message);
                }else{
                    alert("请求失败");
                }
            })
        },
        getMore(){
            this.pageindex++;
            this.getGoodsList();
        },
        toGoodInfo(id){
        this.$router.push({ name: 'goodinfo', params: { id: id }})
        }
    },

    
}
</script>
<style lang="scss" scoped>
    .good-list{
        margin-bottom: 70px;
        background: #fff;
        padding: 8px;
        display:flex;
        flex-wrap: wrap;
        .good-list-item{
            padding: 10px 5px;
            border: solid 1px #ccc;
            margin-left: 5px;
            margin-top:8px;
            width: 48%;
            display: flex;
            flex-direction: column;
            justify-content:space-between;
            img{
                width: 100%;
            }
            h3{
                font-size: 16px;
            }
            .goodsinfo{
                background: #ddd;
                padding: 10px 0;
                   .price{
                display: flex;
                justify-content:space-between;
                .new{
                    font-size: 18px;color: red;font-weight: bold;
                }
              
            }
              .stock{
                    margin-top: 10px;
                }
            }
         
        }
    }
</style>
